<template>
  <div class="trialView">
    <div class="pageCon flex-center-xs animate__animated animate__zoomIn">
      <div class="left">
        <div>
          <span class="title title_pd">招人难</span>
          <span class="title">留人难</span>
        </div>
        <div style="" class="text">
          <span class="title">一个</span>
          <img src="@/assets/images/index/logo_font.png" width="277" height="70" class="logo"/>
          <span class="title">就够了</span>
        </div>
        <div class="registerBtn mainBtn btnMargin mouse-cursor" @click="toRegister">免费试用</div>
        <div class="company flex">
          <div class="mainColor">1000+</div>
          <div>大中型劳动密集型企业火热招聘中:</div>
          <div class="marquee_box">
            <ul class="marquee_list" :class="{ marquee_top: animate }" >
              <li v-for="(item, index) in company" :key="index" class="overEllipsis1">
                  {{item}}
              </li>
            </ul>
          </div>
        
        </div>
      </div>
      <div class="imgBox">
        <img src="@/assets/images/common/bg.png" widdth="790" height="651" class="bgImg"/>
      </div>
    </div>
  </div>
</template>
<script>
import company from '@/utils/register.js'
export default {
  name: 'app',
  data () {
    return {
      animate: false,
      company: company,
      setTimeoutId:'',
    }
  },
  mounted () {
    setInterval(this.showMarquee, 2000);
  },
  methods: {
    // 滚动栏滚动
    showMarquee: function () {
      this.animate = true;
      setTimeout(() => {
        this.company.push(this.company[0]);
        this.company.shift();
        this.animate = false;
      }, 600);
    },
    toRegister () {
      this.$emit('toRegister')
    }
  }
}
</script>
<style lang='less' scoped>
@import '~@/style/register';
.trialView{
  padding-top:70px;
  height:720px;
  position:relative;
  background: linear-gradient(180deg,#f7fdff, #ffffff 100%);
  animation-duration: 0.5s;
}
.title{
  font-size: 52px;
  color:@color3;
}
.title_pd{
  margin-right:40px;
}
.left{
  width:657px;
  z-index:10;
  padding-top:127px;
  .text{
    margin-top:30px;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
  }
  .logo{
    margin:0 10px;
  }
  .btnMargin{
    margin: 68px 0 128px 0;
  }
  .company{
    font-size: 20px;
    .mainColor{
      color:@mainColor;
    }
    &-text{
      width:220px;
    }
    .ul{
      width: 200px;
      margin-left:6px;
      height:26px;
      overflow: hidden;
    }
  }
}
.imgBox{
  margin-right:-186px;
}

.marquee_box {
  display: block;
  position: relative;
  width: 200px;
  height: 26px;
  overflow: hidden;
  cursor: pointer;
  color: @mainColor;
}

.marquee_list {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.marquee_top {
  transition: all 1s;
  margin-top: -26px;
}

.marquee_list li {
  height: 26px;
  line-height: 26px;
  font-size: 16px;
  padding-left: 20px;
}

.marquee_list li span {
  padding: 0 2px;
}
.mainBtn:hover{
  .primaryBtn()
}
</style>